<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>分步表单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/main/layuimini/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/main/layuimini/css/public.css}" media="all">
    <link rel="stylesheet" th:href="@{/main/css/font-awesome.min.css}"/>
    <link rel="stylesheet" th:href="@{/main/css/slick.css}"/>
    <link rel="stylesheet" th:href="@{/main/css/slicknav.css}"/>
    <link rel="stylesheet" th:href="@{/main/css/animate.css}"/>
    <link rel="stylesheet" th:href="@{/main/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{/main/css/theme.css}"/>
    <link rel="stylesheet" th:href="@{/main/css/seats.css}"/>
    <link rel="stylesheet" th:href="@{/main/css/bootstrap.css}">
    <script th:src="@{/main/js/bootstrap.js}"></script>
    <script th:src="@{/main/js/jquery-2.1.3.min.js}"></script>
    <script th:src="@{/main/js/jquery-ui.min.js}"></script>
    <script th:src="@{/main/js/jquery.form.min.js}"></script>
    <script th:src="@{/main/js/jquery.validate.min.js}"></script>
    <script th:src="@{/main/js/seat.js}"></script>
    <script th:src=" @{/main/js/axios.min.js}"></script>
    <script th:src=" @{/main/js/day.js}"></script>
    <script th:src="@{/main/layuimini/lib/layui-v2.6.3/layui.js}"></script>
    <script th:src="@{/main/layuimini/js/lay-module/step-lay/step.js}"></script>
    <style type="text/css">
        .demo {
            width: 800px;
            margin: 40px auto 0 28px;
            min-height: 450px;
        }

        @media screen and (max-width: 360px) {
            .demo {
                width: 340px
            }
        }

        .front {
            width: 200px;
            margin: 5px 32px 45px 60px;
            background-color: #f0f0f0;
            color: #666;
            text-align: center;
            padding: 3px;
            border-radius: 5px;
        }

        .booking-details {
            margin-top: 35px;
            float: right;
            position: relative;
            width: 220px;
            height: 450px;
        }

        .booking-details h3 {
            margin: 5px 5px 0 0;
            font-size: 16px;
        }

        .booking-details p {
            line-height: 26px;
            font-size: 16px;
            color: #999
        }

        .booking-details p span {
            color: #666
        }

        div.seatCharts-cell {
            color: #182C4E;
            height: 25px;
            width: 25px;
            line-height: 25px;
            margin: 3px;
            float: left;
            text-align: center;
            outline: none;
            font-size: 13px;
        }

        div.seatCharts-seat {
            color: #fff;
            cursor: pointer;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }

        div.seatCharts-row {
            height: 35px;
        }

        div.seatCharts-seat.available {
            background-color: #B9DEA0;
        }

        div.seatCharts-seat.focused {
            background-color: #76B474;
            border: none;
        }

        div.seatCharts-seat.selected {
            background-color: #ff5722;
        }

        div.seatCharts-seat.unavailable {
            background-color: #472B34;
            cursor: not-allowed;
        }

        div.seatCharts-container {
            border-right: 1px dotted #adadad;
            width: 550px;
            padding: 20px;
            float: left;
        }

        div.seatCharts-legend {
            padding-left: 0px;
            position: absolute;
            bottom: 16px;
        }

        ul.seatCharts-legendList {
            padding-left: 0px;
        }

        .seatCharts-legendItem {
            float: left;
            width: 90px;
            margin-top: 10px;
            line-height: 2;
        }

        span.seatCharts-legendDescription {
            margin-left: 5px;
            line-height: 30px;
        }

        .checkout-button {
            display: block;
            width: 80px;
            height: 24px;
            line-height: 20px;
            margin: 10px auto;
            border: 1px solid #999;
            font-size: 14px;
            cursor: pointer
        }

        #selected-seats {
            max-height: 200px;
            overflow-y: auto;
            /*overflow-x: none;*/
            width: 200px;
        }

        #selected-seats li {
            float: left;
            width: 72px;
            height: 28px;
            line-height: 28px;
            border: 1px solid #d3d3d3;
            background: #5cb85c;
            margin: 6px;
            font-size: 14px;
            text-align: center;
            color: white
        }

        thead {
            background-color: #f4efef;
        }

        tbody tr td {
            text-align: center;
            padding: 20px 0;
            color: #333;
        }

        .test {
            width: 100%;
            height: 90px;
            padding-top: 20px;
            margin-bottom: 40px;
            background-color: #d89898;
            font-size: 18px;
        }

        .test span {
            font-size: 2em;
            color: #472B34;
        }

        .test p {
            font-size: 14px;
            color: #292820f0;
        }

        .info {
            width: 100%;
            height: 90px;
            padding-top: 20px;
            margin-bottom: 40px;
            background-color: #d89898;
            font-size: 18px;
        }

        .info span {
            font-size: 2em;
            color: #472B34;
        }

        .info p {
            font-size: 14px;
            color: #292820f0;
        }

        #stepForm {
            height: 800px !important;
            margin: 0px auto !important;
            width: 100% !important;
            background-color: transparent !important;
        }
    </style>
</head>
<body class="contact-template">
<div th:replace="common :: header"></div>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-body" style="padding-top: 40px;">
                    <div class="layui-carousel" id="stepForm" lay-filter="stepForm">
                        <div carousel-item style="height: 800px">
                            <div class="main-page clearfix">
                                <div class="container">
                                    <div class="row">
                                        <!--座位布局-->
                                        <div id="main">
                                            <h2 class="top_title">在线选座订座</h2>
                                            <div class="hint" style="    margin-top: 28px;
    margin-left: 170px;
">
                                                <span style="display: inline-block;
    font-size: 16px;
    color: #666;
    height: 26px;
    line-height: 26px;
    padding-left: 28px;
    background-repeat: no-repeat;
    margin-right: 18px;">已选座位</span>
                                                <span style="background-color: #ff5722;width: 25px;height: 25px;border-radius: 5px;display: inline-block"></span>
                                                <span style="display: inline-block;
    font-size: 16px;
    color: #666;
    height: 26px;
    line-height: 26px;
    padding-left: 28px;
    background-repeat: no-repeat;
    margin-right: 18px;">可选座位</span>
                                                <span style="background-color: #B9DEA0;;width: 25px;height: 25px;border-radius: 5px;display: inline-block"></span>
                                                <span style="display: inline-block;
    font-size: 16px;
    color: #666;
    height: 26px;
    line-height: 26px;
    padding-left: 28px;
    background-repeat: no-repeat;
    margin-right: 18px;">禁选座位</span>
                                                <span style="background-color: #472B34;;width: 25px;height: 25px;border-radius: 5px;display: inline-block"></span>
                                            </div>
                                            <div class="demo">
                                                <div id="seat-map">
                                                    <div class="front">银幕中央</div>
                                                </div>
                                                <div class="booking-details" style="height: 500px;">
                                                    <p>电影：<span class="playname"></span></p>
                                                    <p>演出厅：<span class="studioname"></span></p>
                                                    <p>时间：<span class="time"></span></p>
                                                    <p>票价：<span class="price"></span></p>
                                                    <hr>
                                                    <p>已选座位：</p>
                                                    <ul id="selected-seats">
                                                        <span id="error"></span>
                                                    </ul>
                                                    <hr>
                                                    <p>票数：<span id="counter" style="color: red">0</span></p>
                                                    <p>总计：<b><span class="layui-icon layui-icon-rmb"
                                                                     style="color: red;margin-right: 7px"></span><span
                                                            id="total" style="color: red">0</span></b></p>
                                                    <hr>
                                                    <div class="layui-form-item" style="margin-left: -55px;">
                                                        <div class="layui-input-block">
                                                            <button class="layui-btn submit" lay-submit
                                                                    lay-filter="formStep">
                                                                &emsp;购买&emsp;
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div style="clear: both"></div>
                                            </div>
                                            <br/>
                                        </div>
                                        <input type="hidden" id="pId" th:value="${pId}">
                                        <input type="hidden" id="hId" name="hId">
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="layui-form" style="margin: 0 auto;max-width: 1000px;padding-top: 40px;">
                                    <div class="info">
                                        <span>请您仔细核对订单信息</span> <br>
                                        <p>如遇订单问题请致电110进行查询</p>
                                    </div>
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th style="font-size: 16px;
        color: #333;
        width: 25%;
        padding: 14px 58px;
        font-weight: 400;">电影
                                            </th>
                                            <th style="font-size: 16px;
        color: #333;
        width: 25%;
        padding: 14px 58px;
        font-weight: 400;">时间
                                            </th>
                                            <th style="font-size: 16px;
        color: #333;
        width: 25%;
        padding: 14px 58px;
        font-weight: 400;">演出厅
                                            </th>
                                            <th style="font-size: 16px;
        color: #333;
        width: 25%;
        padding: 14px 58px;
        font-weight: 400;">座位
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td class="playname" style="text-align: center;
    padding: 20px 0;
    color: #333;">
                                            </td>
                                            <td class="time" style="text-align: center;
    padding: 20px 0;
    color: #333;">
                                            </td>
                                            <td class="studioname" style="text-align: center;
    padding: 20px 0;
    color: #333;">
                                            </td>
                                            <td class="seatselected" style="text-align: center;
    padding: 20px 0;
    color: #333;">
                                                <ul class="seats">

                                                </ul>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block" style="margin-left: 280px;margin-top: 70px;">
                                            <button type="button" class="layui-btn layui-btn-primary pre">上一步
                                            </button>
                                            <button style="margin-left: 100px;" class="layui-btn" lay-submit
                                                    lay-filter="formStep2">
                                                &emsp;确认订单&emsp;
                                            </button>
                                            <div style="    margin-left: 487px;margin-top: 11px;">
                                                <span> 总价：</span><span class="total"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="layui-form" style="margin: 0 auto;max-width: 1000px;padding-top: 40px;">
                                    <div class="test"></div>
                                    <div style="    line-height: 24px;
    padding: 20px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    margin-bottom: 10px;">订单编号：<span class="orderNo"></span></div>
                                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                                        <ul class="layui-tab-title">
                                            <li class="layui-this">微信支付</li>
                                            <li>支付宝</li>
                                            <li>账户余额</li>
                                        </ul>
                                        <div class="layui-tab-content" style="margin-left: 180px;">
                                            <div class="layui-tab-item layui-show"><img
                                                    style="width: 150px;height: 200px;"
                                                    th:src="@{/main/images/wechat.jpg}" alt="">
                                                <button id="wx" style="margin-left: 100px;" class="layui-btn" lay-submit
                                                        lay-filter="formStep3">
                                                    &emsp;支付&emsp;
                                                </button>
                                            </div>
                                            <div class="layui-tab-item zfb">
                                            </div>
                                            <div class="layui-tab-item" style="font-size: 25px">
                                                <div id="balance"></div>
                                                <div id="massage"></div>
                                                <div class="layui-form-item">
                                                    <div class="layui-input-block"
                                                         style="margin-left: 280px;margin-top: 70px;">
                                                        <button id="recharge" class="layui-btn layui-btn-normal">充值
                                                        </button>
                                                        <button id="user_balance" style="margin-left: 100px;"
                                                                class="layui-btn" lay-submit
                                                                lay-filter="formStep3">
                                                            &emsp;支付&emsp;
                                                        </button>
                                                        <div style="    margin-left: 487px;margin-top: 11px;">
                                                            <span> 总价：</span><span class="total"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div style="text-align: center;margin-top: 90px;">
                                    <i class="layui-icon layui-circle"
                                       style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                                    <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                        入款成功
                                    </div>
                                    <div style="font-size: 14px;color: #666;margin-top: 20px;">预计两小时到账</div>
                                </div>
                                <div style="text-align: center;margin-top: 50px;">
                                    <button class="layui-btn next lay-submit" lay-filter="formStep4">再入一笔</button>
                                    <button class="layui-btn layui-btn-primary">查看账单</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<div id="test4">
    <div class="layui-form layuimini-form" lay-filter="formTest">
        <div class="layui-form-item" style="margin-top: 55px;">
            <label class="layui-form-label required">充值金额</label>
            <div class="layui-input-block">
                <input type="text" name="balance" lay-verify="required|money" lay-reqtext="金额不能为空"
                       placeholder="请输入充值金额" value=""
                       class="layui-input">
                <div class="layui-form-item" style="margin-top: 28px;margin-left: -61px;">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" id="submit" lay-submit lay-filter="saveBtn">
                            充值
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    function getUserName() {
        return document.cookie.split(";")[0].split("=")[1];
    }

    let orderNo;

    $("#test4").hide();
    let orderId;
    let money;
    let mId;
    layui.use(['form', 'util', 'step', 'table', 'element'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$,
            step = layui.step,
            util = layui.util,
            table = layui.table,
            element = layui.element;
        var seatStr = [];
        //获取演出计划详情
        axios.post("/plan/getPlanByPId/" + $("#pId").val()).then(function (response) {
            let data = response.data.data;
            mId = data.mId;
            $(".playname").html(data.mName);
            $(".studioname").html(data.hName);
            $(".time").html(dayjs(data.startDate).format("MM月DD日 HH:mm"));
            $("#hId").val(data.hId);
        })

        //获取座位对应的map
        function getString(row, col, json) {
            var seatArr = [];
            var badArray = [];
            var str = "";
            var badStr = "";
            for (var i = 1; i <= row; i++) {
                for (var j = 1; j <= col; j++) {
                    for (var k = 0; k < json.length; k++) {
                        if (json[k].status == 1 && json[k].row == i && json[k].col == j) {
                            str += "a";
                        } else if (json[k].status == 2 && json[k].row == i && json[k].col == j) {
                            str += "b";
                        } else if (json[k].status == 0 && json[k].row == i && json[k].col == j) {
                            badStr += "'" + i + "_" + j + "'";
                            badArray.push(badStr);
                            badStr = "";
                            str += "a";
                        }
                    }
                }
                seatArr.push(str);
                str = "";
            }
            return seatArr;
        }

        let price; //票价
        function getBadString(row, col, json) {
            var seatArr = [];
            var badArray = [];
            var str = "";
            var badStr = "";
            for (var i = 1; i <= row; i++) {
                for (var j = 1; j <= col; j++) {
                    for (var k = 0; k < json.length; k++) {
                        if (json[k].status != 1 && json[k].row == i && json[k].col == j) {
                            badStr += i + "_" + j;
                            badArray.push(badStr);
                            badStr = "";
                        }
                    }
                }
                seatArr.push(str);
                if (badStr.length > 0) {
                    badArray.push(badStr);
                }
                badStr = "";
                str = "";
            }
            return badArray;
        }

        // 获取所有的票
        $(function () {
            axios.post(
                "/ticket/getTicketsByPId/" + $("#pId").val()
            ).then(function (response) {
                var json = response.data.data;
                var len = json.length;
                price = json[0].ticketPrice;
                $(".price").html('<span class="layui-icon layui-icon-rmb" style="color: red;margin-right: 7px"></span>' + price + "/张")
                var rowSet = new Array(len);
                var colSet = new Array(len);
                for (var i = 0; i < len; i++) {
                    rowSet.push(json[i].row);
                    colSet.push(json[i].col);
                }
                var rowlen = rowSet.pop();
                var collen = colSet.pop();
                seatStr = getString(rowlen, collen, json);
                var badArr = getBadString(rowlen, collen, json);
                createSeat(seatStr, badArr, rowlen, collen);
            })
        })

        //创建座位
        function createSeat(seatStr, badArr, row, col) {
            //模拟座位为一个二维数组，每点击一次二维数组的值加1来判断对于选定区域是否去除
            var num = new Array(row + 1);
            for (var i = 0; i < num.length; i++) {
                num[i] = new Array(col + 1).fill(0);
            }
            $(document).ready(function () {
                var $cart = $('#selected-seats'), //座位区
                    $counter = $('#counter'), //票数
                    $total = $('#total'); //总计金额
                if (parseInt($("#counter").text()) == 0) {
                    $("#error").text("最多只能购买6张票")
                }
                var sc = $('#seat-map').seatCharts({
                    map: seatStr,
                    legend: { //定义图例
                        node: $('#legend'),
                        items: [
                            ['a', 'available', '可选座'],
                            ['a', 'unavailable', '已售出']
                        ]
                    },
                    click: function () { //点击事件
                        if (parseInt($("#counter").text()) >= 0) {
                            $("#error").remove();
                        } else {
                            $("#selected-seats").html('<span id="error">最多只能购买6张票</span>')
                        }
                        if (this.status() == 'available' && parseInt($("#counter").text()) < 6) { //可选座
                            $('<li>' + (this.settings.row + 1) + '排' + this.settings.label + '座</li>')
                                .attr('id', 'cart-item-' + this.settings.id)
                                .attr('row', this.settings.row + 1)
                                .attr('selected', 'true')
                                .attr('col', this.settings.label)
                                .attr("seat_status", "0")
                                .data('seatId', this.settings.id)
                                .appendTo($cart);
                            $counter.text(sc.find('selected').length + 1);
                            $total.text(recalculateTotal(sc) + price);
                            return 'selected';
                        } else if (this.status() == 'selected') { //已选中
                            //更新数量
                            $counter.text(sc.find('selected').length - 1);
                            //更新总计
                            $total.text(recalculateTotal(sc) - price);
                            //删除已预订座位
                            $('#cart-item-' + this.settings.id).remove();
                            //可选座
                            return 'available';
                        } else if (this.status() == 'unavailable') { //已售出
                            return 'unavailable';
                        } else if (parseInt($("#counter").text()) >= 6) {
                            layer.alert('一次最多只能购买6张票', {
                                title: ['警告', 'font-size:18px;'],
                                icon: 5,
                                btn: '我知道了',
                                anim: 6
                            });
                            return 'available';
                        } else {
                            return this.style();
                        }
                    }
                })
                sc.get(badArr).status('unavailable');
            });
            //已售出或座位损坏的座位
        }

        let count = 0;//用于验证用户第几次点击来防止倒计时混乱

        function recalculateTotal(sc) {
            var total = 0;
            sc.find('selected').each(function () {
                total += price;
            });
            return total;
        }

        function getSeat() {
            var jsonArr = [];
            var nodes = $("#selected-seats").children("li");//所有选中的节点
            nodes.each(function (index, node) {
                for (var i = 0; i <= index; i++) {
                    var row = $(node).attr("row");
                    var col = $(node).attr("col");
                    var json = {
                        "row": row,
                        "col": col,
                    };
                    jsonArr.push(json);
                }
            })
            return deduplicate(jsonArr);
        }

        function deduplicate(arr3) {
            let data = [];
            arr3.forEach(item => {
                if (data.length == 0) {
                    data.push(item);
                } else {
                    let isDiff = true;//是否不同
                    for (let i = 0; i < data.length; i++) {
                        let dataItem = data[i];
                        if (dataItem.row == item.row && dataItem.col == item.col) {
                            /*集合中已经存在相同数据*/
                            isDiff = false;
                            break;
                        }
                    }
                    if (isDiff) {
                        data.push(item);
                    }
                }
            });
            return data
        }

        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%', //设置容器宽度
            stepWidth: '750px',
            height: '500px',
            stepItems: [{
                title: '选座购票'
            }, {
                title: '确认订单'
            }, {
                title: '完成付款'
            }, {
                title: '取票观影'
            }]
        });

        // 倒计时

        function countDown(serverTime) {
            var endTime = serverTime + 1680000 //假设为结束日期
            var timerout;//定义全局变量接收timer参数
            clearTimeout(timerout);//每次调用倒计时时重置
            util.countdown(endTime, serverTime, function (date, serverTime, timer) {
                timerout = timer;
                layui.$('.test').html('请您在' + '<span>' + date[2] + '</span>' + '分' + '<span>' + date[3] + '</span>' + '秒' + "以内完成付款" + '<br>' + '<p>否则订单自动取消，如遇订单问题请致电110进行查询</p>');
                if (serverTime == endTime) {
                    layer.alert('您未在规定时间内完成支付请返回重新购买', {
                        title: '注意',
                        anim: 6,
                        btn: '我知道了'
                    }, function (index) {
                        window.location = '/ToMoviePlan/' + mId;
                        layer.close(index);
                    });
                }
            });
        }

        function getSelected(str) {
            let arr = [];
            for (let i = 0; i < str.length; i++) {
                if (str[i] !== '座' && str[i] !== '排') {
                    arr.push(str[i])
                }
            }
            const m = 2;
            const n = arr.length / 2;
            let result = new Array(n);
            for (let i = 0; i < m; i++) {
                result[i] = new Array(m);
            }
            result = spArray(2, arr);
            return result;
        }

        // 锁定购票
        var spArray = function (n, arr) {
            var newArr = [], i;
            for (i = 0; i < arr.length;) {
                newArr.push(arr.slice(i, i += n))
            }
            return newArr;
        }
        form.on('submit(formStep)', function (data) {
            if ($("#selected-seats").children("li").length == 0) {
                layer.alert('您还未选择座位，请选择座位', {
                    title: ['警告', 'font-size:18px;'],
                    icon: 5,
                    btn: '我知道了',
                    anim: 6
                });
                return;
            }
            var data = JSON.stringify(getSeat());
            let pId = parseInt($("#pId").val());
            axios({
                method: 'POST',
                url: '/LockTicket/' + pId,
                headers: {
                    'Content-Type': "application/json;charset=UTF-8"
                },
                data: data
            }).then(function (res) {
                let json = res.data.data;
                if (json == '锁定成功') {
                    let sel = $("#selected-seats").find('li').text();
                    let arr = getSelected(sel);
                    for (let i = 0; i < arr.length; i++) {
                        let flag = i + 1;
                        $(".seats").append('<li style="float: left;margin-left: 28px;"><i style="color: #4e4e4e;font-size: 18px;margin: 0 2px;">' + arr[i][0] + '</i><span>排</span><i style="font-size: 18px;margin: 0 2px;">' + arr[i][1] + '</i><span>座</span></li>')
                        if (flag % 2 == 0) {
                            $(".seats").append('<br><br>')
                        }
                    }
                    step.next('#stepForm');
                    let total = $("#total").text();
                    $(".total").html('<span class="layui-icon layui-icon-rmb" style="color: red;"></span>' + '<span style="color: red;font-size: 27px;margin-left: 4px;">' + total + '</span>')
                } else {
                    layer.msg(json, {
                        icon: 5,
                        time: 1000,
                    });
                    return false;
                }
            })
            return false;
        });
        // 确认订单
        form.on('submit(formStep2)', function (data) {
            layer.confirm("您确定订单没有问题吗？确认后无法修改", function (index) {
                let pId = parseInt($("#pId").val());
                let jsonStr = JSON.stringify(getSeat());
                axios({
                    method: 'POST',
                    url: '/order/insertOrder/' + pId,
                    headers: {
                        'Content-Type': "application/json;charset=UTF-8"
                    },
                    params: {
                        amount: parseInt($("#total").text()),
                    },
                    data: jsonStr
                }).then(function (res) {
                    let json = res.data.data;
                    if (count == 0) {
                        let serverTime = new Date().getTime();
                        countDown(serverTime);
                    }
                    count++;
                    $(".orderNo").html(json.orderNo);
                    orderNo = json.orderNo;
                    orderId = json.id;
                    layer.close(index);
                    getBalance();
                    step.next('#stepForm');
                    let zfb = '<div style="color: indianred;font-size: 18px;margin-top: 28px;">' +
                        '您需要支付的订单金额为<span class="total" style="color: red;' +
                        '    font-size: 27px;' +
                        '    margin-left: 4px;">56</span>元' +
                        '</div>' +
                        '<form method="post">' +
                        '<input type="hidden" id="zfb_amount">' +
                        '<input type="submit"  value="支付" id="buyByzfb" style="margin-left: 100px;margin-top: 48px;" class="layui-btn">' +
                        '</form>'
                    $(".zfb").html(zfb);
                    $(".zfb").find("form").attr("action", "/alipay/tarde/pay/" + orderNo);
                });
            })
            return false;
        })
        // 余额充值
        form.on('submit(formStep3)', function (data) {
            if (money >= parseInt($("#total").text())) { //余额充足
                axios({
                    method: 'POST',
                    url: '/order/payOrder',
                    headers: {
                        'Content-Type': "application/json;charset=UTF-8"
                    },
                    data: {
                        id: orderId,
                        amount: parseInt($("#total").text())
                    }
                }).then(function (res) {
                    let data = res.data.data;
                    if (data === '支付成功') {
                        layer.msg(data, {
                            icon: 6,
                            time: 1000,
                        });
                        step.next('#stepForm');
                    } else {
                        layer.msg(data, {
                            icon: 5,
                            time: 1000,
                        });
                        getBalance();
                    }
                })
            } else {
                layer.confirm("您的余额不足请充值", function (index) {
                    $("#recharge").click();
                })
            }
        });

        // 获取余额
        function getBalance() {
            axios({
                method: 'POST',
                url: '/user/getBalance/' + getUserName(),
            }).then(function (res) {
                money = res.data.data;
                $("#balance").html('您的余额还剩' + ' <span style="font-size: 28px;color: #380808;">' + money + '</span>' + '元')
                if (money < parseInt($("#total").text())) { //余额不足
                    $("#massage").html('')    //清空内容
                    $("#massage").html('余额不足请充值')
                    $("#recharge").show();
                } else {
                    $("#massage").html('')    //清空内容
                    $("#massage").html('余额充足可购买')
                    $("#recharge").hide();
                }
            })
        }

        // 充值
        $("#recharge").click(function () {
            layui.use(['form'], function () {
                var form = layui.form,
                    layer = layui.layer,
                    $ = layui.$;
                form.verify({
                    money: [
                        /^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$/,
                        '请输入正确的金额'
                    ],
                })
                layui.use('layer', function () {
                        var layer = layui.layer;
                        var index = layer.open({
                            title: '评价',
                            area: ['500px', '300px'],
                            theme: 'skyblue',
                            type: 1,
                            content: $('#test4'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        });
                        form.on('submit(saveBtn)', function (data) {
                            $("#submit").attr("disabled", "disabled").addClass("layui-btn-disabled");
                            axios.post(
                                '/user/recharge',
                                data.field
                            ).then(function (response) {
                                let data = response.data.data
                                if (data === '充值成功') {
                                    layer.msg(data, {
                                        icon: 1,
                                        time: 1000,
                                        end: function () {
                                            getBalance();
                                            $("#test4").hide();
                                            layer.close(index)
                                        }
                                    });
                                }
                            })
                        })
                    }
                );
            })
        })
        //修改订单
        $('.pre').click(function () {
            let pId = parseInt($("#pId").val());
            var data = JSON.stringify(getSeat());
            axios({
                method: 'POST',
                url: '/UnLockTicket/' + pId,
                headers: {
                    'Content-Type': "application/json;charset=UTF-8"
                },
                data: data
            }).then(function (res) {
                let json = res.data.data;
                if (json == "解除锁定成功") {
                    $(".seats").children().remove();
                    $("#test").children().remove();
                    step.pre('#stepForm');
                } else {
                    layer.msg(json, {
                        icon: 5,
                        time: 1000,
                    });
                    return false;
                }
            })
        });
        $('.next').click(function () {
            window.location = '/buyTicket/' + $("#pId").val();
        });
    });

</script>
</html>